export function render(state) {
    return `
        <div class="interaction-bar">
            <div class="interaction-item like-item ${state.liked ? 'active' : ''}" data-action="like">
                <div class="icon-wrapper">
                    <sl-icon name="heart-fill" class="icon like-icon"></sl-icon>
                </div>
                <span class="count">${formatCount(state.likeCount)}</span>
            </div>

            <div class="interaction-item comment-item" data-action="comment">
                <div class="icon-wrapper">
                    <sl-icon name="chat-dots-fill" class="icon comment-icon"></sl-icon>
                </div>
                <span class="count">${formatCount(state.commentCount)}</span>
            </div>

            <div class="interaction-item collect-item ${state.collected ? 'active' : ''}" data-action="collect">
                <div class="icon-wrapper">
                    <sl-icon name="star-fill" class="icon collect-icon"></sl-icon>
                </div>
                <span class="count">${formatCount(state.collectCount)}</span>
            </div>

            <div class="interaction-item share-item" data-action="share">
                <div class="icon-wrapper">
                    <sl-icon name="share-fill" class="icon share-icon"></sl-icon>
                </div>
                <span class="count">${formatCount(state.shareCount)}</span>
            </div>
        </div>
    `;
}

function formatCount(count) {
    if (count >= 1000000) {
        return (count / 1000000).toFixed(1) + 'M';
    } else if (count >= 1000) {
        return (count / 1000).toFixed(1) + 'K';
    }
    return count.toString();
}